<template>
  <div class="dashboard-editor-container">

    <!--<panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <div style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"/>
    </div>-->

    <!--<el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart/>
        </div>
      </el-col>
    </el-row>-->


  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  import RaddarChart from './dashboard/RaddarChart'
  import PieChart from './dashboard/PieChart'
  import BarChart from './dashboard/BarChart'

  import {getLineChartData} from "@/api/index";

  let lineChartDatas = {
    users:{
      name:'注册数量',
      xdata:['1','2','3','4','5','6','7'],
      data:[1,30,3,4,5,6,7],
    },
    distributors:{
      name:'授权个数',
      xdata:['1','2','3','4','5','6','7'],
      data:[1,2,9,4,5,6,7],
    },
    purchases:{
      name:'金额',
      xdata:['1','2','3','4','5','6','7'],
      data:[1,2,8,4,5,6,7],
    },
    orders:{
      name:'订单量',
      xdata:['1','2','3','4','5','6','7'],
      data:[1,2,8,4,5,6,7],
    },
  };


  export default {
    name: 'Index',
    components: {
      PanelGroup,
      LineChart,
      RaddarChart,
      PieChart,
      BarChart
    },
    data() {
      return {
        lineChartData: {},
      }
    },
    created() {
      /*getLineChartData().then(response => {
        lineChartDatas = response.data;
      })*/;
      this.lineChartData = lineChartDatas.users;

    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartDatas[type]
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
